import React, { Component } from 'react';
import { Form, Input, Tooltip, Icon, Select, message, Button, AutoComplete } from 'antd';
import {URL} from "../../../src/constant/Constant"
import './News_list.css';
const FormItem = Form.Item;


// const url = 'http://192.168.1.137:8088';


 class Create_ques extends Component{//数据管理 新建问卷模板
	constructor(props){
    super(props);
    this.state = {
      choose_num: this.props.choose
    }
  }
  onChangeNum(e){
    this.setState({
      choose_num: e
    })
  }
  onChangeNumToo(){
    this.setState({
      choose_num: this.props.choose
    })
  }
  onChangeBody(){
    this.props.onChange(this.state.choose_num)
  } 
  handleSubmit=(e)=>{
    e.preventDefault();
    const data=this.props.form.getFieldsValue();
    console.log(data)
    fetch(URL.urlRoot+URL.addQuestionnaires, {
      method: 'POST', // or 'PUT'
      body: JSON.stringify(data), // data can be `string` or {object}!
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(res =>{
      if(res.code == 0){
        message.info('创建成功!')
      }
    } )
        .catch(err => console.log(err));

  }
	render(){
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };


		return(
			<div id="news_list">
        <div className="col-md-12 col-sm-12">
          <h2 >新建问卷模板</h2>
          <h4 >您可以创建新的问卷模板。</h4>
          <Button type = 'primary' className="create_news" onMouseOver={() => {this.onChangeNum(4)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>查看问卷模板列表</Button> 
          <div className="ques_box col-md-12 col-sm-12">
            <div>
              <h5 style={{"font-weight": 'bold'}}>填写模板信息</h5>
            </div>
            <Form onSubmit={this.handleSubmit} className="pleaseRegister">
              <FormItem
                {...formItemLayout}
                label="问卷标题"
              >
                {getFieldDecorator('name', {
                  rules: [{
                    type: 'name', message: '请输入问卷模板标题!',
                  }, {
                    required: true, message: '请输入标题!',
                  }],
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="描述"
              >
                {getFieldDecorator('desciption', {
                  rules: [{
                    required: true, message: '请输入描述!',
                  }, {
                  }],
                })(
                  <Input />
                )}
              </FormItem>
          
              <FormItem
                {...formItemLayout}
                label={(
                  <span>
                    作者&nbsp;
                    <Tooltip title="为了方便交流，请您填写真实的姓名">
                      <Icon type="question-circle-o" />
                    </Tooltip>
                  </span>
                )}
              >
                {getFieldDecorator('creator', {
                  rules: [{ required: true, message: '请输入作者名!', whitespace: true }],
                })(
                  <Input />
                )}
              </FormItem>

              <FormItem
                {...formItemLayout}
                label="问卷URL地址"
              >
                {getFieldDecorator('templateUrl', {
                  rules: [{ required: true, message: '请输入对应的地址，方便问卷发送!' }],
                })(
                  <AutoComplete
                    
                    onChange={this.handleWebsiteChange}
                    placeholder="问卷的在线地址"
                  >
                    <Input />
                  </AutoComplete>
                )}
              </FormItem>
            
              <FormItem {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit">创建问卷</Button>
              </FormItem>
      </Form>
          </div>    
        </div>
      </div>
		)
	}
}
const MyCreateQuest=Form.create()(Create_ques);
export default MyCreateQuest;